<template>
	<view class="store-fishpond">
		<!-- 顶部导航 -->
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="bgColor" :style="{ height: statusBarHeight}"></view>
			<!-- #endif -->
			<view class="header">
				<view class="head-menu" >
					<view class="iconfont icon-ic_leftarrow" @click="goback"></view>
					<view class="iconfont icon-ic_home" @click="goHome" ></view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP || APP-PLUS -->
		<view :style="{ height: statusBarHeight}"></view>
		<!-- #endif -->
		<view class="container">
			<!-- 头部钓场信息卡片 -->
			<view class="Info-card">
				<view class="card-cont">
					<view class="c-left">
						<view class="row1">
							<view class="title">
								{{fishingPlace.name}}
							</view>
							<view class="type-tag">
								{{fishingPlace.type}}
							</view>
						</view>
						<view class="row2">
							<view class="row2-item">
								评分：{{fishingPlace.score}}
							</view>
							<view class="row2-item">
								销量：{{fishingPlace.sales}}
							</view>
						</view>
						<view class="row3" v-if="fishingPlace.open_start&&fishingPlace.open_end">
							营业时间：{{fishingPlace.open_start | timeSlice}} - {{fishingPlace.open_end | timeSlice}}
						</view>
						<view class="row3" v-else>
							营业时间：24小时
						</view>
						<view class="row3">
							钓场地址：{{fishingPlace.address}}
						</view>
					</view>
					<view class="c-right">
						<u--image :showLoading="true" :src="fishingPlace.img" radius="12" width="250rpx" height="170rpx"></u--image>
					</view>
				</view>
				<view class="card-bottom">
					<view class="single-tag" @click="mapNav">
						<u-icon name="/static/images/dh.png" size="30rpx"></u-icon>
						<view class="tit">
							导航
						</view>
					</view>
					<!-- <view class="single-tag">
						<view v-if="!fishingPlace.collect" class="s-t-wrap">
							<u-icon name="star" size="26" color="#333" style="padding-top: 2px;"></u-icon>
							<view class="tit">
								收藏
							</view>
						</view>
						<view v-else class="s-t-wrap">
							<u-icon name="star-fill" size="26" color="#ffc53e" style="padding-top: 2px;"></u-icon>
							<view class="tit t-active">
								已收藏
							</view>
						</view>
					</view> -->
					<view class="single-tag" >
						<view v-if="!fishingPlace.focus" @click="relationAdd" class="s-t-wrap">
							<u-icon name="heart" size="30rpx" color="#333" style="padding-top: 2px;"></u-icon>
							<view class="tit">
								关注
							</view>
						</view>
						<view v-else @click="relationDelete" class="s-t-wrap">
							<u-icon name="heart-fill" size="30rpx" color="#ffc53e" style="padding-top: 2px;"></u-icon>
							<view class="tit t-active">
								已关注
							</view>
						</view>
					</view>
					<view class="single-tag" @click="handleCall">
						<u-icon name="phone" size="30rpx"></u-icon>
						<view class="tit">
							联系钓场
						</view>
					</view>
			
				</view>
			</view>
			<!-- 鱼塘列表 -->
			<view class="fishpond-list" v-if="fishpondList.length!==0 && !goodsLoading">
				<view class="fp-single" v-for="(item,index) in fishpondList" :key="item.id" >
					<view class="left" @click="navTo(item.id)">
						<u--image :showLoading="true" :src="item.img" radius="12" width="140rpx" height="140rpx">
							<view slot="error" class="noPic">
								<view class="iconfont icon-icon_noPhoto3 pic"></view>
							</view>
						</u--image>
					</view>
					<view class="right">
						<view class="r-left" @click="navTo(item.id)">
							<view class="rl-row1">
								{{item.name}}
							</view>
							<view class="rl-row2">
								鱼种：
								<text class="type" v-for="(tItem,tIndex) in item.typeList" :key="tIndex">{{tItem}}</text>
							</view>
							<!-- <view class="rl-row3">
								最高赚￥{{item.brokerage}}
							</view> -->
							<view class="rl-row4">
								<view class="rr-left">
									库存：{{item.stock}}
								</view>
								<view class="rr-right">
									销量：{{item.sales}}
								</view>
							</view>
						</view>
						<view class="r-right">
							<view class="rr-top">
								<text class="rrb-l">￥</text>
								<text class="rrb-r">{{item.price}}</text>
							</view>
							<view class="rr-bottom">
								<u-button shape="circle" :text="item.stock>0?'购买':'暂无库存'" color="#ffc53e"  class="custom-style" :disabled="!item.stock>0" @click="goPay(item)"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-if="fishpondList.length == 0 && !goodsLoading">
				<u-empty
					mode="data"
					icon="https://crmeb-test.zhidiaotianxia.com/uploads/def/20250114/17be10d575841cfbf428f9e0ad4e1cae.png"
					text="商家暂未发布鱼票"
					width="250rpx"
					textSize="22rpx"
				>
				</u-empty>
			</view>
		</view>
		<storeTabbar :value="0" :storeId="storeID"></storeTabbar>
		<map id="map" hidden="true"></map>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import { toLogin } from '@/libs/login.js';
	import storeTabbar from '../../../components/storeTabbar/storeTabbar.vue';
	import Map from '@/js_sdk/fx-openMap/openMap.js'
	import { relationAdd,relationDelete,createOrder,getStoreGoods,getStoreDetail} from '@/api/store.js';
	export default {
		components:{storeTabbar},
		/* computed:{
			...configMap( mapGetters(['isLogin'])),
		}, */
		computed:{
			...configMap([], mapGetters(['isLogin'])),
		},
		data() {
			return {
				storeID: 0, // 钓场id
				store: {}, // 商铺详情
				statusBarHeight: 0,
				// preview: false,
				fishingPlace:{
					// name:'水上田园',
					// type:'黑坑',
					// score:'5.0',
					// sales:'160',
					//open_start:'',//营业开始时间
					//open_end:'',//营业结束时间
					// address:'东莞市进港北路超达工业园南侧约190米水上田园钓鱼场',
					// img:'/static/pic/avatar.png',
					// longitude:113.595794,//经度
					// latitude:22.881196,//纬度
					// collect:false,
					// focus:true,
					// service_phone:1315541514,//电话
				},
				fishpondList:[
					/* {
						id:1,
						img:'https://cdn.uviewui.com/uview/album/3.jpg',
						name:'鲫鱼塘',
						typeList:['鲫鱼'],
						brokerage:'6.00',
						price:'160.00'
					},
					{
						id:2,
						img:'https://cdn.uviewui.com/uview/album/7.jpg',
						name:'金玉塘',
						typeList:['鲤鱼','翘嘴'],
						brokerage:'10.00',
						price:'260.00'
					},
					{
						id:3,
						img:'https://cdn.uviewui.com/uview/album/7.jpg',
						name:'鲢鳙塘',
						typeList:['鲢鳙'],
						brokerage:'6.00',
						price:'160.00'
					},
					{
						id:4,
						img:'https://cdn.uviewui.com/uview/album/8.jpg',
						name:'草鱼塘',
						typeList:['草鱼'],
						brokerage:'8.00',
						price:'180.00'
					},
					{
						id:5,
						img:'https://cdn.uviewui.com/uview/album/8.jpg',
						name:'草鱼塘',
						typeList:['草鱼'],
						brokerage:'8.00',
						price:'180.00'
					},
					{
						id:6,
						img:'https://cdn.uviewui.com/uview/album/8.jpg',
						name:'草鱼塘',
						typeList:['草鱼'],
						brokerage:'8.00',
						price:'180.00'
					},
					{
						id:7,
						img:'https://cdn.uviewui.com/uview/album/8.jpg',
						name:'草鱼塘',
						typeList:['草鱼'],
						brokerage:'8.00',
						price:'180.00'
					},
					{
						id:8,
						img:'https://cdn.uviewui.com/uview/album/8.jpg',
						name:'草鱼塘',
						typeList:['草鱼'],
						brokerage:'8.00',
						price:'180.00'
					},
					{
						id:9,
						img:'https://cdn.uviewui.com/uview/album/8.jpg',
						name:'草鱼塘',
						typeList:['草鱼'],
						brokerage:'8.00',
						price:'180.00'
					} */
				],
				goodsLoading:false,
				mapShow:true,
				where: {
					order: '',
					keyword: '',
					page: 1,
					limit: 10
				}
			}
		},
		
		onLoad: function(options) {
			this.storeID = Number(options.storeID);
			if (!options.storeID) return this.$util.Tips({
				title: '缺少参数无法查看钓场鱼票'
			}, {
				tab: 1,
				url: '/pages/fishingPond/index'
			});
			// this.preview = options.time ? true : false;
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			this.init()
		},
		methods: {
			//初始化
			init(){
				this.getFishingMrchantDetailData()
			},
			//获取钓场钓票列表
			getFishingMrchantDetailData(){
				let that = this;
				let id = this.storeID
				this.goodsLoading = true
				getStoreGoods(id,that.where).then(res=>{
					this.goodsLoading = false
					// console.log(res);
					if(res.data&&res.data.list.length!=0){
						let storeInfo=res.data.list[0].merchant;
						// let {mer_name,mer_address,mer_avatar,sales,long,lat,products,care,service_phone,open_start,open_end,mer_type_name} = res.data.list[0];
						this.fishingPlace={
							name:storeInfo.mer_name,
							type:mer_type_name,
							score:'5.0',
							sales:"",
							open_start:"",
							open_end:"",
							address:"",
							img:storeInfo.mer_avatar,
							longitude:Number(long),//经度
							latitude:Number(lat),//纬度
							// collect:false,
							focus:storeInfo.,
							service_phone:""
						}
					}
					
					this.fishpondList = res.data.list.map(item=>{
						let {product_id,store_name,store_info,image,price,stock,sales} = item
						let obj = {
							id:product_id,
							img:image,
							name:store_name,
							typeList:['草鱼'],
							brokerage:'8.00',
							price,
							stock,
							sales,
							sku:'4f15c703aad0'
						}
						return obj
					})
				}).catch(err=>{
					this.goodsLoading = false
				})
			},
			getStoreInfo(){
				getStoreDetail(this.id).then(res => {
					// res举例：{"status":200,"message":"success","data":{"mer_type_name":"旗舰店","isset_certificate":false,"services_type":0,"mer_id":77,"category_id":1,"type_id":3,"mer_name":"爱钓","mer_address":"广东省深圳市宝安区西乡宝源路 阳光海湾花园6栋B座1308","mer_keyword":"","mer_avatar":"https:\/\/www.zhidiaotianxia.com\/uploads\/def\/20240812\/2118e9677aef2c0ed4c4ba8bda5c1d06.jpg","mer_banner":"https:\/\/www.zhidiaotianxia.com\/uploads\/def\/20240812\/2118e9677aef2c0ed4c4ba8bda5c1d06.jpg","mini_banner":"","sales":0,"product_score":"5.0","service_score":"5.0","postage_score":"5.0","mark":"0.01","status":1,"commission_rate":"0.00","commission_switch":0,"long":"","lat":"","is_bro_room":1,"is_bro_goods":1,"is_trader":0,"mer_info":"test","service_phone":"","create_time":"2024-08-12 20:19:50","care_count":1,"copy_product_num":0,"export_dump_num":0,"mer_money":"0.00","sub_mchid":"","delivery_way":["2"],"delivery_balance":"0.00","margin":"0.00","margin_remind_time":null,"ot_margin":"0.01","is_margin":0,"care":true,"type_name":"旗舰店"}}
					this.store = res.data;
					// if((res.data.delivery_way.length == 1 && res.data.delivery_way[0] == '1') || res.data.delivery_way.length == 2){
					// 	this.tabs = this.tabs1
					// 	this.service_open = true
					// }else{
					// 	this.tabs = this.tabs2
					// 	this.service_open = false
					// }
					
					// if(1 == this.store.category_id) {
					// 	this.tabs = this.tabs3
					// }
					// else {
					// 	this.tabs = this.tabs1;
					// }
					
					
					// #ifdef H5
					this.ShareInfo();
					// #endif
					
				}).catch(err => {
					this.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
					
				})
			},
			//关注
			relationAdd(){
				let islogin = this.isLogin
				if (this.isLogin === false) {
					toLogin()
				} else {
					let params = {
						type_id:this.storeID,
						type:10
					}
					relationAdd(params).then(res=>{
						if(res.status === 200)this.fishingPlace.focus = true
						// console.log(res);
					})
				}
				
			},
			// 取消关注
			relationDelete(){
				let islogin = this.isLogin
				if (this.isLogin === false) {
					toLogin()
				} else {
					let params = {
						type_id:this.storeID,
						type:10
					}
					relationDelete(params).then(res=>{
						if(res.status === 200)this.fishingPlace.focus = false
						// console.log(res);
					})
				}
				
			},
			//导航
			mapNav(){
				const type = 'gcj02'
				let {name,longitude,latitude} = this.fishingPlace
				let options = {
					destination:{  //导航终点点坐标和名称
						longitude,
						latitude,
						name
					},
					mapId:"map" //map 组件的 id
				}
				Map.navigation(options,type)
			},
			goback() {
				// uni.navigateBack();
				uni.switchTab({
					url:'/pages/fishingPond/index'
				})
			},
			//拨打电话
			handleCall(){
				let {service_phone} = this.fishingPlace
				if(service_phone){
					uni.makePhoneCall({
						phoneNumber: service_phone 
					});
				}else{
					uni.$u.toast('暂无服务电话')
				}
				
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//进入鱼票购买详情页
			navTo(id){
				let storeID = this.storeID;
				uni.navigateTo({
					url:`/pages/store/ticket_details/index?storeID=${storeID}&areaID=${id}&seat=null`
				})
			},
			//去付款
			goPay(opt){
				// debugger
				console.log(opt);
				let islogin = this.isLogin
				let product_attr_unique = opt.sku;
				let product_id = opt.id
				if (this.isLogin === false) {
					toLogin()
				} else {
					// if(this.inventory === '0'){
					// 	uni.$u.toast('此规格暂无库存')
					// 	return
					// }
					let params = {
						product_id,
						product_attr_unique
					}
					createOrder(params).then(res=>{
						let {group_order_id} = res.data
						uni.navigateTo({
							url:`/pages/store/order_submit/index?id=${group_order_id}`
						})
					})
				}
			}
		},
		onReachBottom() {
			// 模拟触底刷新
			// if(this.tabActive == 0){
			// 	setTimeout(()=>{
			// 		this.goods.push(...this.goods);
			// 	},500)
			// }
		},
		onPullDownRefresh(){
			// 模拟上拉刷新
			// setTimeout(()=>{
			// 	const newList = this.goods.reverse();
			// 	this.goods = newList;
			// 	uni.stopPullDownRefresh();
			// },500)
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f6f7f9;
	}
	.store-fishpond {
		/* position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		background: left top/750rpx 390rpx no-repeat fixed;
		overflow: hidden;
		touch-action: none; */
		.top{
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 1000;
			.bgColor{
				background: #549CE3;
			}
			.header {
				position: relative;
				z-index: 6;
				display: flex;
				align-items: center;
				padding-right: 34rpx;
				height: 43px;
				padding-left: 33rpx;
				background: #549CE3;
				.head-menu {
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-box-align: center;
					-webkit-align-items: center;
					align-items: center;
					height: 27px;
					width: 70px;
					background: rgba(255,255,255,.8);
					border-radius: 13px;
					.icon-ic_leftarrow {
						font-size: 32rpx;
						color: #333333 !important;
					}
					.iconfont {
						-webkit-box-flex: 1;
						-webkit-flex: 1;
						flex: 1;
						text-align: center;
						color: #000000 !important;
						box-sizing: border-box;
						&.icon-ic_leftarrow {
							border-right: 1px solid rgba(000,000,000,.2) !important;
						}
					}
				}
			}
		}
		.container{
			padding: 20rpx;
			margin-top: 43px;
			.Info-card{
				background-color: #ffffff;
				padding: 30rpx 26rpx 0;
				border-radius: 8px;
				.card-cont{
					display: flex;
					padding-bottom: 20rpx;
					.c-left{
						flex: 1;
						padding-right: 30rpx;
						.row1{
							display: flex;
							align-items: flex-end;
							padding-top: 6rpx;
							padding-bottom: 14rpx;
							.title{
								font-size: 38rpx;
								font-weight: bold;
								color: #333333;
							}
							.type-tag{
								background-color: #549CE3;
								color: #ffffff;
								font-size: 24rpx;
								padding: 4rpx 12rpx;
								border-radius: 4px;
								transform: scale(.8);
								margin-left: 8rpx;
							}
						}
						.row2{
							display: flex;
							justify-content: space-between;
							border-top: 1px solid #eee;
							padding: 10rpx 2rpx;
							.row2-item{
								font-size: 24rpx;
								color: #549CE3;
							}
						}
						.row3{
							font-size: 24rpx;
							color: #696969;
							margin-top: 4rpx;
						}
					}
					.c-right{
						
					}
				}
				.card-bottom{
					display: flex;
					justify-content: space-between;
					border-top: 1px solid #eee;
					padding: 22rpx 4rpx;
					.single-tag{
						display: flex;
						align-items: center;
						// justify-content: center;
						width: 140rpx;
						.s-t-wrap{
							display: flex;
							align-items: center;
						}
						.tit{
							font-size: 24rpx;
							margin-left: 6rpx;
							color: 666666;
							padding: 0;
							line-height: 24rpx;
						}
						.t-active{
							color: #ffc53e;
						}
					}
				}
			}
			.fishpond-list{
				margin-top: 20rpx;
				.fp-single{
					background-color: #fff;
					display: flex;
					padding: 20rpx;
					border-radius: 8px;
					margin-bottom: 16rpx;
					.left{
						.noPic{
							.pic{
								font-size: 60rpx;
								color: #ccc;
							}
						}
					}
					.right{
						display: flex;
						align-items: center;
						flex: 1;
						margin-left: 20rpx;
						.r-left{
							flex: 1;
							.rl-row1{
								font-size: 34rpx;
							}
							.rl-row2{
								font-size: 24rpx;
								margin-top: 12rpx;
								color: #549CE3;
								.type{
									margin-right: 10rpx;
								}
							}
							.rl-row3{
								background-color: #549CE3;
								color: #fff;
								font-size: 24rpx;
								padding: 4rpx 20rpx;
								border-radius: 50px;
								display: inline-flex;
								margin-top: 10rpx;
								// transform: scale(.92);
								// position: relative;
								// left: -8rpx;
							}
							.rl-row4{
								display: flex;
								font-size: 24rpx;
								color: #9f9f9f;
								margin-top: 4rpx;
								.rr-left{
									margin-right: 50rpx;
								}
							}
						}
						.r-right{
							color: #ff8c3e;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.rr-top{
								margin-right: 8rpx;
								.rrb-l{
									font-size: 24rpx;
								}
								.rrb-r{
									font-size: 36rpx;
									font-weight: bold;
								}
							}
							.rr-bottom{
								margin-top: 4rpx;
								.custom-style{
									width: 120rpx;
									color: #ffc53e;
									transform: scale(.85);
								}
								/deep/ .u-button{
									height:25px !important;
								}
								/deep/ .u-button__text{
									font-size: 14px !important;
									line-height:normal !important;
								}
							}
						}
					}
				}
			}
			.empty{
				padding-top: 100rpx;
				height: 500rpx;
				background-color: #ffffff;
				border-radius: 10px;
				margin-top: 20rpx;
			}
		}
	}
	
	
</style>
